<template>
  <div class="main">
    <div class="backImg"></div>
    <div class="login">
      <div class="title">
        <span>梦酒吧管理系统</span>
      </div>
      <div class="list">
        <input type="text" id="name" v-model="form.name" required placeholder="请输入用户名" class="input-field" />
      </div>
      <div class="list">
        <input type="password" id="pwd" v-model="form.pwd" required placeholder="请输入密码" class="input-field" />
      </div>
      <div class="btn">
        <button type="button" @click="login()" class="login-button">登录</button>
      </div>
    </div>
  </div>
</template>
<script setup>

import {ref,reactive, onMounted} from 'vue'
import axios from 'axios';
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const form = reactive({
  name:"string",
  pwd:"string",
})
const router = useRouter();
onMounted(() => {
})
function login() {
  axios({
    method: "post",
    url: "https://localhost:7052/api/Login?name="+form.name+"&pwd="+form.pwd,
  }).then((response) => {
    if (response.data == 0 || response.data == 1) {
      ElMessage({
        message: "账户名或密码错误",
        type: "warning",
      });
    }
    else {
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      sessionStorage.setItem("token", response.data);

      // 这里可能需要使用路由功能来跳转页面
      setTimeout(() => {
        router.push({ path: "/home" });
        form.value = ""
      }, 1000); // 延迟1秒后跳转
    }
  }).catch((error) => {
    ElMessage({
      message: "请输入正确的账户或密码",
      type: "warning",
    });
    // 错误处理逻辑，例如跳转到登录页
    // this.$router.push("/Login");
  });
  return false
} 
</script>
<style>
.backImg {
  background: url("/img//login.jpg");
  background-size: 100% 100%;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  width: 20%;
  padding: 20px 20px 25px 20px;
}

.login .title {
  text-align: center;
  padding-bottom: 5px;
  font-weight: 1000;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.login .title span {
  font-size: 30px;
  color: #00c3ff;
}

.login .list {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.login .list input {
  border-radius: 3px;
  border: none;
  outline: none;
  color: #999;
  border: 1px solid #bdbdbd;
  font-size: 14px;
  line-height: 35px;
  padding: 0 10px;
  display: block;
  box-sizing: border-box;
  flex: 7;
}

.login .list .getCode span {
  font-size: 20px;
  background: #f5f7fa;
  color: #777;
  border-radius: 4px;
  line-height: 38px;
  border: 1px solid #ccc;
  display: inline-block;
  margin-left: 10px;
  width: 80px;
  text-align: center;
  user-select: none;
  cursor: pointer;
}

.btn {
  display: flex;
  justify-content: flex-end;
  padding-top: 5px;
}

.btn button {
  font-size: 13px;
  color: #fff;
  background: #46b5ff;
  outline: none;
  border: none;
  line-height: 35px;
  padding: 0 20px;
  display: inline-block;
  flex: 1;
  cursor: pointer;
}
</style>